<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>用户列表</title>
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/common.css" type="text/css" />
  <link rel="stylesheet" href="./css/pagination.css" type="text/css" />
  <link rel="stylesheet" href="./css/userList.css" />
  <script src="./js/utils.js"></script>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <!-- 用户登录拦截 -->
  <script src="./js/interceptor.js"></script>
  <!-- 用户列表页的js文件 -->
  <script src="./js/userList.js"></script>
</head>

<body>
  <div class="box">
    <!-- 1 标题 -->
    <h3>用户列表</h3>
    <!-- 2 搜索框 -->
    <div class="seach-box">
      <div class="search">
        <input type="text" class="userName" />
        <button>搜索</button>
        <button class="add-btn">+ 添加用户</button>
      </div>
      <div class="info">
        <span>欢迎您:root123</span>
        <button>退出</button>
      </div>
    </div>
    <!-- 3 用户渲染发表格 -->
    <table class="users-table">
      <tr>
        <th>序号</th>
        <th>用户编码</th>
        <th>用户名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>电话</th>
        <th>用户类型</th>
        <th>操作</th>
      </tr>
    </table>
    <!-- 4 分页器 -->
    <div class="page-nation">
      <div class="page-nation-left">
        共<span class="total">23</span>页，
        第<span class="pageNum">1</span>页
      </div>
      <div class="page-nation-right">
        <div class="first-page">首页</div>
        <div class="pre-page">上一页</div>
        <div class="next-page">下一页</div>
        <div class="last-page">尾页</div>
        <div class="goto-pageNum-div"><input type="text" class="goto-pageNum" value="1" /></div>
        <div class="btn">GO</div>
        <select name="pageSize" id="pageSize">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
      </div>
    </div>
  </div>
  </div>
</body>

</html>